<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>产品菜单1</title>
    <link th:href="@{/login/css/productTab.css}" rel="stylesheet"/>
    <link th:href="@{/login/css/bootstrap1.css}" rel="stylesheet">
    <script th:src="@{/login/js/bootstrap1.js}"></script>
    <script th:src="@{/login/js/jquery.js}"></script>
    <style>
        body {
            background-color: #f8f9fa;
            padding-top: 20px;
            padding-bottom: 40px;
        }

        .card {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border: none;
            margin-bottom: 20px;
        }

        .card-header {
            background-color: #4a6baf;
            color: white;
            font-weight: 600;
        }

        .form-label {
            font-weight: 500;
        }

        .preview-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .btn-submit {
            background-color: #4a6baf;
            color: white;
            font-weight: 600;
            padding: 10px 20px;
        }

        .btn-submit:hover {
            background-color: #3a5a9f;
            color: white;
        }
        .page{
            position: absolute;
            right: 5%;
            margin-top: -3px;
        }
        a:link{
            color:white;
            font-size: 18px;
            font-weight: 500;
            text-decoration:none;
        }
        a:visited{
            color:white;
        }
        a:hover{
            color:orange;
        }
        a:active{
            color:white;
        }
    </style>
</head>
<body>
<!--纯修改页面-->
<div class="container">
    <div class="row">
        <!-- 商品信息表单 - 占8格 -->
        <div class="col-lg-8 col-md-12 mb-4">
            <div class="card">
                <div class="card-header" style="position: relative">
                    <i class="fas fa-info-circle me-2"></i>商品信息
                    <a href="/user/productTable" class="btn btn-sm page">返回上页</a>
                </div>
                <div class="card-body">
                    <form action="/user/postProductList" method="post">
                        <div class="mb-4">
                            <h5 class="mb-3 border-bottom pb-2">基本信息</h5>
                            <input type="hidden" id="id" name="id" th:value="${product.id}">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="name" class="form-label">商品名称</label>
                                    <input type="text" class="form-control" id="name" name="name"
                                           placeholder="输入商品名称" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="category" class="form-label">商品分类</label>
                                    <select class="form-select" id="category" name="category" required>
                                        <!--默认"请选择分类"，当后台没有给商品分类（null）或 分类是空字符串时，设为默认选项-->
                                        <option value="">请选择分类</option>
                                        <option value="电子产品">电子产品</option>
                                        <option value="电脑配件">电脑配件</option>
                                        <option value="家居用品">家居用品</option>
                                        <option value="服装">服装</option>
                                        <option value="书籍" >书籍</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <!-- 价格与库存 -->
                        <div class="mb-4">
                            <h5 class="mb-3 border-bottom pb-2">价格与库存</h5>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="price" class="form-label">商品价格</label>
                                    <div class="input-group">
                                        <span class="input-group-text">¥</span>
                                        <input type="number" class="form-control" id="price" name="price"
                                               placeholder="0.00" step="0.01" min="0" required>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="stock" class="form-label">库存数量</label>
                                    <input type="number" class="form-control" id="stock" name="stock"
                                           placeholder="0" min="0" required>
                                </div>
                            </div>
                        </div>
                        <!-- 商品图片 -->
                        <div class="mb-4">
                            <h5 class="mb-3 border-bottom pb-2">商品图片</h5>
                            <div class="mb-3">
                                <label for="imageUrl" class="form-label">上传商品图片</label>
                                <input type="text" id="imageUrl" name="imageUrl" class="form-control"
                                        placeholder="可手动填写">
                            </div>
                        </div>
                        <div class="col-12">
                            <label for="description" class="form-label">商品描述</label>
                            <textarea id="description" name="description" class="form-control"
                                      rows="3"></textarea>
                        </div>
                        <!-- 商品状态 -->
                        <div class="mb-4">
                            <h5 class="mb-3 border-bottom pb-2">商品状态</h5>
                            <div class="mb-3">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="status" id="status1" value="1">
                                    <label class="form-check-label" for="status1">正常(上架)</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="status" id="status2" value="0">
                                    <label class="form-check-label" for="status2">下架</label>
                                </div>
                            </div>
                        </div>
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <button type="submit" class="btn btn-submit">保存商品信息</button>
                        </div>
                        <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>